import React, { useState, useEffect, usePar } from 'react'
import axios from 'axios'
import { NavLink, useLocation, useParams } from 'react-router-dom'
import { Button, Flex } from 'antd';
import { NavBar, Space, Toast } from 'antd-mobile'
import { Input } from 'antd-mobile'
import aa from '../picture/1.png'
import bb from '../picture/2.png'
import cc from '../picture/3.png'
import dd from '../picture/4.jpg'
import { Sticky } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { Cell } from '@nutui/nutui-react'
export default function Cate() {
  const location = useLocation().search.split('=')[1]
  const [list, setList] = useState([])
  const [fen, setFen] = useState([])
  const [nums, setNums] = useState(0)
  const totalSeconds = 1 * 3600 + 48 * 60 + 10;
  const [remainingSeconds, setRemainingSeconds] = useState(totalSeconds);
  useEffect(() => {
    getList()
    getFen()
    lx()
    const timer = setInterval(() => {
      if (remainingSeconds > 0) {
        setRemainingSeconds((prevSeconds) => prevSeconds - 1);
      } else {
        clearInterval(timer);
      }
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, [remainingSeconds])
  const formatTime = (seconds) => {
    const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
    const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
    const secs = (seconds % 60).toString().padStart(2, '0');
    return `${hours}:${minutes}:${secs}`;
  };
  const getList = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/cate/xiang/?_id=${location}`)
    setList(data.data.data)
  }

  const getFen = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/cate/fen`)
    setFen(data.data.data)
  }
  function lx(cates) {
    for (let i = 0; i < fen.length; i++) {
      if (fen[i]._id == cates) {
        return fen[i].name
      }
    }
  }

  async function jia(val) {
    await axios.post(`http://127.0.0.1:3000/cate/jia/?_id=${val._id}`)
    getList()
  }
  async function jian(val) {
    await axios.post(`http://127.0.0.1:3000/cate/jian/?_id=${val._id}`)
    getList()
  }
  async function che(good) {
    await axios.post(`http://127.0.0.1:3000/cate/che`, { _id: good._id, goods: good.goods })
    Toast.show({
      content: '成功加入购物车',
      icon: 'success',
    })
  }
  // console.log(nums)
  return (
    <div>
      <Sticky>
        <div style={{ margin: '0 auto', width: '453px', height: '60px', background: "white" }}>
          <span style={{ float: 'left' }}><NavLink to='/home'><ArrowLeft /></NavLink></span>
          <h2 style={{ textAlign: 'center' }}>商品信息</h2>
          <ul style={{ marginTop: '10px' }}>
            <li style={{ float: 'left', marginLeft: '157px', listStyle: 'none', textDecoration: nums == 0 ? 'underline' : '', textDecorationColor: nums == 0 ? 'red' : '', textDecorationThickness: nums == 0 ? '3px' : '', color: nums == 0 ? 'red' : '' }} onClick={() => setNums(0)}><b>基本信息</b></li>
            <li style={{ float: 'left', marginLeft: '50px', listStyle: 'none', textDecoration: nums == 1 ? 'underline' : '', textDecorationColor: nums == 1 ? 'red' : '', textDecorationThickness: nums == 1 ? '3px' : '', color: nums == 1 ? 'red' : '' }} onClick={() => setNums(1)}><b>图文详情</b></li>
          </ul>
        </div>
      </Sticky>

      {list.map((i, index) =>
        <div key={index} style={{ marginTop: '20px', display: nums == 0 ? 'inline-block' : 'none' }}>
          <img src={i.img} style={{ height: '300px', width: '100%' }}></img>
          <div style={{ background: 'red', width: '100%', height: '50px', lineHeight: '50px', display: 'flex' }}>
            <div style={{ marginLeft: '20px', color: 'white', float: 'left' }}>
              <big><b>￥{i.price}</b></big>
            </div>
            <div style={{ marginLeft: '90px' }}>
              <div style={{ color: 'white', height: '10px', width: '120px', marginLeft: '210px', lineHeight: '28px', float: 'left' }}><small>距离本厂结束还剩</small></div>
              <div style={{ width: '75px', height: '15px', borderRadius: '25px', float: 'left', marginLeft: '217px', lineHeight: '50px', textAlign: 'center', background: 'white', marginTop: '16px' }}>
                <div style={{ height: '20px', lineHeight: '13px' }}>
                  <small><b style={{ color: 'red' }}>{formatTime(remainingSeconds)}
                  </b></small>
                </div>
              </div>
            </div>
          </div>
          <div style={{ marginTop: '20px' }}>
            <p style={{ marginLeft: '20px' }}><b><big>{i.name}</big></b></p>
            <br></br>
            <span style={{ marginLeft: '20px' }}><b><big>提货时间：03月13日</big></b></span>
            {/* <br></br><br></br><br></br><br></br><br></br> */}
            <ul style={{ float: 'right', marginRight: '40px', paddingBottom: '20px' }}>
              <li style={{ listStyle: 'none', marginLeft: '20px', float: 'left', fontSize: '30px', lineHeight: '20px', fontWeight: 'bolder' }} onClick={() => jian(i)}>
                <Button type="text" disabled={i.num <= 1 ? 'disabled' : ''} style={{ fontSize: '25px' }}>
                  －
                </Button>
              </li>
              <li style={{ listStyle: 'none', marginLeft: '10px', float: 'left', fontSize: '20px' }}>
                <div style={{ width: '35px', height: '30px', background: 'rgb(240,240,240)', lineHeight: '30px', textAlign: 'center', marginTop: '2px' }}>
                  {i.num}
                </div>
              </li>
              <li style={{ listStyle: 'none', marginLeft: '10px', float: 'left', fontSize: '30px' }} onClick={() => jia(i)}>
                <Button type="text" disabled={i.kucun < 1 ? 'disabled' : ''} style={{ fontSize: '35px', color: 'red', paddingBottom: '10px' }}>
                  +
                </Button>
              </li>
              <li style={{ float: 'left' }}>
                <Button style={{ borderRadius: '25px', width: '100px', height: '25px', background: 'red', color: 'white', lineHeight: '25px', marginLeft: '10px' }} onClick={() => che(i)}><b>
                  <Cell
                    title="加入购物车"
                    onClick={() =>
                      Toast.show({
                        content: '成功加入购物车',
                        icon: 'success',
                      })
                    }
                    style={{ background: 'red', color: 'white', width: '100px', borderRadius: '30px', textAlign: 'center', height: '30px', lineHeight: '5px' }}
                  >
                  </Cell>
                </b></Button>
              </li>
            </ul>
          </div>
          <div style={{ background: 'rgb(240,240,240)', width: '100%', height: '20px', marginTop: '40px' }}></div>
          {/* <div> */}
          <ul style={{ marginLeft: '105px' }}>
            <li style={{ float: 'left', marginLeft: '20px', marginTop: '20px' }}>----------</li>
            <li style={{ float: 'left', marginLeft: '20px', marginTop: '15px' }}><h2>商品详情</h2></li>
            <li style={{ float: 'left', marginLeft: '20px', marginTop: '20px' }}>----------</li>
          </ul>
          {/* </div> */}
          <div style={{ width: '460px', height: '100px' }}>
            <div style={{ width: '430px', height: '100px', borderRadius: '20px', background: 'pink', margin: '60px auto', paddingLeft: '20px' }}>
              <p style={{ fontWeight: 'bolder', paddingTop: '10px' }}>商品名称：{i.name}</p>
              <p style={{ fontWeight: 'bolder', marginTop: '5px' }}>商品编号：{i.nid}</p>
              <p style={{ fontWeight: 'bolder', marginTop: '5px' }}>上架时间：{i.time}</p>
              <p style={{ fontWeight: 'bolder', marginTop: '5px' }}>类型：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{lx(i.cate)}</p>
            </div>
          </div>
          <ul style={{ marginLeft: '105px' }}>
            <li style={{ float: 'left', marginLeft: '20px', marginTop: '20px' }}>----------</li>
            <li style={{ float: 'left', marginLeft: '20px', marginTop: '15px' }}><h2>商品详情</h2></li>
            <li style={{ float: 'left', marginLeft: '20px', marginTop: '20px' }}>----------</li>
          </ul><br></br><br></br><br></br>
          <div style={{ width: '460px', height: '100px', paddingLeft: '20px', paddingRight: '20px' }}>
            {i.content}<br></br>
            <img src={aa}></img>
            <img src={bb} style={{ width: '420px' }}></img>
            <img src={cc} style={{ width: '420px' }}></img>
            <img src={dd} style={{ width: '420px' }}></img>
          </div>
        </div>
      )}
      <div style={{ display: nums == 1 ? 'inline' : 'none', margin: '0 auto' }}>
        <img src={aa} style={{ marginLeft: '18px', marginTop: '15px' }}></img>
        <img src={bb} style={{ width: '420px', marginLeft: '18px' }}></img>
        <img src={cc} style={{ width: '420px', marginLeft: '18px' }}></img>
        <img src={dd} style={{ width: '420px', marginLeft: '18px' }}></img>
      </div>
    </div>
  )
}

